 模板
<template>
  <!-- 视频播放器控制栏容器，包含播放控制、弹幕和设置三个主要功能区域 -->
  <div class="flex items-center justify-between" style="height: 30px">
    <!-- 播放控制区域组件 -->
    <play-part />
    <!-- 全屏状态下的弹幕控制栏组件 -->
<!--    <danmu-bar v-if="isFullscreen" />-->
    <!-- 视频设置区域组件 -->
    <setting-part />
  </div>
</template>

<script setup lang="ts">
import PlayPart from './PlayPart.vue';
import SettingPart from './SettingPart.vue';
/* import DanmuBar from '../danmubar/index.vue' */

/**
 * 获取视频播放器元素引用
 * 用于全屏状态监听和控制
 */
const { playerElement } = toRefs(useVideoStore())

/**
 * 初始化全屏控制功能
 * @param playerElement - 视频播放器DOM元素引用
 * @param options - 全屏配置选项
 * @param options.autoExit - 是否自动退出全屏模式
 * @returns 包含全屏状态的响应式对象
 */
const { isFullscreen } = useFullscreen(playerElement, { autoExit: true })
</script>

<style scoped lang="scss">
.danmu-bar {
  --grey1: #fff;
  --grey2: #ccc;
  --bg1: #666666a5;
}
</style>
